<style lang="stylus">
body
  app-region no-drag
  overflow hidden
</style>

<style lang="stylus" scoped>
p>i
  display flex
  position absolute

  &:before
    display flex
    flex 1
    content ''
    border 0 solid rgba(0, 0, 0, 0.4)
    border-width 100vh 100vw
    margin -100vh -100vw
    position absolute
    width 100%
    height 100%
    box-sizing content-box
    pointer-events none
    z-index 0

  $space = 24px
  $circle_radius = 12px
  $space_circle_radius = $space + $circle_radius
  $border_width = 2px

  &>b
    background url('!/svg/o.svg'), url('!/svg/o.svg') 100% 0, url('!/svg/o.svg') 0 100%, url('!/svg/o.svg') 100% 100%, url('!/svg/o.svg') 50% 0, url('!/svg/o.svg') 50% 100%, url('!/svg/o.svg') 0 50%, url('!/svg/o.svg') 100% 50%
    background-repeat no-repeat
    background-size 2 * $circle_radius
    display flex
    flex 1
    margin -($space_circle_radius)
    padding $circle_radius
    position relative

    &:after, &:before
      content ''
      flex 1

    &:after
      position absolute
      box-sizing content-box
      border $border_width solid #fff
      margin: $circle_radius - $border_width
      left $space
      right $space
      bottom $space
      top $space

    &:before
      background url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23ff9e40' stroke-width='2' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e") 0 0 / contain no-repeat

    &>i
      top $space_circle_radius
      left @top
      right @top
      bottom @top
      user-select none
      position absolute
      display flex
      justify-content center
      z-index 1
      font-style normal

      &>nav
        bottom 40px
        position absolute
        display flex

        &>button
          &:first-child
            width 180px
            margin-right 8px

          &:last-child
            font-size 20px
            font-weight 100
            width 52px
            background-color #F9FAFB
            color #474D59
            border-color #ddd
</style>

<template lang="pug">
drag(:minH="95" :minW="242" :move="move" :style="init" ref="drag" v-if="wait")
  b
    i
      nav
        btn(@click.prevent="start") 开始录制
        btn(@click.prevent="cancel") ×
i(:style="{ width: `${w}px`, height: `${h}px`, left: `${x}px`, top: `${y}px` }" v-else)
  b
</template>

<script lang="coffee">

import ipc from '~/lib/ipc.coffee'
import ON from '~/lib/broadcast/on.coffee'
import btn from '~/vue/btn.vue'
import Drag from '@rmw/vue3-drag'
import '@rmw/vue3-drag/drag.css'


export default {
components: {
  Drag
  btn
}
setup:=>
  {body} = document
  {clientHeight,clientWidth} = body
  wait = shallowRef true
  bh = innerHeight*2
  bw = innerWidth*2
  space = 96
  h = Math.min 546,clientHeight-space
  w = Math.min h*1.57,clientWidth-space
  x = (clientWidth - w) / 2
  y = (clientHeight - h) / 2
  init = {
    width: "#{w}px"
    height: "#{h}px"
    left: "#{x}px"
    top: "#{y}px"
  }

  x = shallowRef x
  y = shallowRef y
  h = shallowRef h
  w = shallowRef w


  drag = shallowRef()
  meta = ref()

  {cancel} = ipc.recbar
  onMounted =>
    elem = drag.value.i

    (
      ob = new ResizeObserver (li)=>
        for {target:{clientHeight:height,clientWidth:width}} from li
          if width == 0
            ob.unobserve elem
            return
          w.value = width
          h.value = height
          break
        return
    ).observe elem
    return


  return {
    drag
    wait
    x
    y
    w
    h
    init
    start:=>
      wait.value = false
      localStorage.area = JSON.stringify [
        x.value
        y.value
        w.value
        h.value
      ].map(Math.round)
      await ipc.area()
      return
    move:({offsetLeft, offsetTop},_x,_y)=>
      x.value = offsetLeft+_x
      y.value = offsetTop+_y
      return
    cancel
  }
}
</script>
